<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D立方体</title>
    <style>
        html{
            height: 100%;
        }
        body{
            margin: 0px;
            height: 100%;
        }
        section{
            height: 100%;
            position: relative;
            /*
                perspective:设置观察者与 z=0 所在平面之间的距离。
            */
            perspective:2000px;

            /*
                perspective-origin:设置观察者的角度，以x轴和y轴为及基准。
                默认值：50% 50%
            */
            /*perspective-origin: -50% 150%;*/
             animation: dong 5s linear infinite;
             transform-style: preserve-3d;
        }
        div{
            width: 300px;
            height: 300px;
            position: absolute;
            left: calc(50% - 300px/2);
            top: calc(50% - 300px/2);
            
        }
        @keyframes dong{0%{
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        }
        100%{transform: rotateX(360deg) rotateY(360deg)  rotateZ(360deg);}}
        div:nth-child(1){
            background-image: url(img/1.jpg);
            /*transform-origin:设置转换的参考点*/
            /*默认是：transform-origin: 50% 50% 0;*/
            /*上*/
            transform: translateY(-150px) rotateX(90deg);
        }
        div:nth-child(2){
            background-image: url(img/2.jpg);
            /*下*/
            transform: translateY(150px) rotateX(90deg);
        }
        div:nth-child(3){
            background-image: url(img/3.jpg);
            /*左*/
            transform: translateX(-150px) rotateY(90deg);

        }
        div:nth-child(4){
            background-image: url(img/4.jpg);
            /*右*/
            transform: translateX(150px) rotateY(90deg);
        }
        div:nth-child(5){
            background-image: url(img/5.jpg);
            /*前*/
            transform: translateZ(150px);
        }
        div:nth-child(6){
            background-image: url(img/6.jpg);
            /*后*/
            transform: translateZ(-150px);
        }

    </style>
</head>
<body>
    <section>
        <div>上</div>
        <div>下</div>
        <div>左</div>
        <div>右</div>
        <div>前</div>
        <div>后</div>
    </section>
</body>
</html>